import React, { PureComponent } from 'react';
// 引入样式
import './scss/painting.scss'
// 样式
import { Modal } from 'antd';
export default class Painting extends PureComponent {
  constructor() {
    super()
    this.state = {
      // 背景板颜色
      backColor: '#ffffff',
      // 画板宽高
      canvasWH: {
        width: '',
        height: ''
      },
      // 画笔颜色
      linkColor: '#000000',
      // 画笔大小
      linkw: 4,
      // 控制画布大小的对话框
      visible: false
    }
  }

  // input的输入事件
  handleInput = ({ target }) => {
    let { name, value } = target
    // 设置input和state同步
    this.setState({
      [name]: value
    })
  }
  componentDidMount () {
    document.getElementById('canvas').addEventListener('touchmove', (e) => {
      e.preventDefault(); // 阻止默认事件
    }, { passive: false }); // 兼容苹果安卓
    // 给canvas定宽高
    let candiv = document.getElementById('canvaswh');
    this.setState({
      canvasWH: {
        width: candiv.offsetWidth,
        height: candiv.offsetHeight
      }
    })
  }
  // 获取画布元素
  getCanTouch = (event) => {
    // 获取画布
    let canvas = document.getElementById('canvas');
    // 声明画板
    let ctx = canvas.getContext("2d");
    // 获取手机按压屏幕的x轴位置
    let touch = event.targetTouches[0];
    let newx = touch.pageX;
    let newy = touch.pageY;
    return {
      newx: newx,
      newy: newy,
      ctx: ctx
    }
  }
  // 按压事件
  touchCan = (event) => {
    let { ctx, newx, newy } = this.getCanTouch(event);
    // 开启移动笔触
    ctx.beginPath();
    ctx.moveTo(newx, newy);
  }
  // 画板事件
  canvasInput = (event) => {
    let { linkw, linkColor } = this.state;
    let { ctx, newx, newy } = this.getCanTouch(event);
    // // 开启移动笔触
    ctx.lineTo(newx, newy);
    // 设置颜色
    ctx.strokeStyle = linkColor;
    // 设置粗细
    ctx.lineWidth = linkw;
    // 设置样式 可以是圆边 方边
    ctx.lineCap = "round";
    // 关闭移动笔触
    ctx.stroke();
  }
  // 清空画布函数
  deleteCan = () => {
    let canvas = document.getElementById('canvas');
    let candiv = document.getElementById('canvaswh');
    // 重置画布高度清空画布
    canvas.height = candiv.offsetHeight;
    // 重置画布背景颜色
    this.setState({
      backColor: '#ffffff'
    })
  }
  // 橡皮擦
  updateCan = () => {
    let { backColor } = this.state;
    this.setState({
      // 把画笔颜色设置成背景色
      linkColor: backColor
    })
  }
  // 画笔大小
  linkweight = () => {
    this.setState({
      visible: true,
    });
  }
  handleCancel = () => {
    this.setState({
      visible: false,
    });
  };
  // 调整画笔大小
  clickLink = (size) => {
    this.setState({
      linkw: size
    })
  }
  // canvas保存为图片
  baocun = () => {
    let date = Date.now();
    let canvas = document.getElementById('canvas');
    var strDataURI = canvas.toDataURL();
    var a = document.createElement("a");
    a.download = `${date}.jpg`;　　//下载的文件名，默认是'下载'
    a.href = strDataURI;
    a.target = '_blank';
    document.body.appendChild(a); a.click(); a.remove();　　//下载之后把创建的元素删除
  }
  render () {
    let { backColor, canvasWH, linkColor, linkw } = this.state;
    return (
      <div className='painting'>
        <div style={{ width: '100%', height: '90%' }} id='canvaswh'>
          <canvas id="canvas" width={canvasWH.width} height={canvasWH.height} onTouchStart={(e) => this.touchCan(e)} onTouchMove={(e) => this.canvasInput(e)} style={{ background: backColor }}></canvas>
        </div>
        {/* 调节大小的对话框 */}
        <Modal
          visible={this.state.visible}
          onCancel={this.handleCancel}
          footer={null}
          getContainer={document.getElementsByClassName('painting')[0]}
          className='paintingModal'
          centered={true}
          mask={false}
        >
          <ul>
            <li style={{ width: '2vw', height: '2vw', background: linkColor }} onClick={() => this.clickLink(4)} className={linkw === 4 ? 'bordermodal' : ''}></li>
            <li style={{ width: '3vw', height: '3vw', background: linkColor }} onClick={() => this.clickLink(6)} className={linkw === 6 ? 'bordermodal' : ''}></li>
            <li style={{ width: '4vw', height: '4vw', background: linkColor }} onClick={() => this.clickLink(8)} className={linkw === 8 ? 'bordermodal' : ''}></li>
            <li style={{ width: '5vw', height: '5vw', background: linkColor }} onClick={() => this.clickLink(10)} className={linkw === 10 ? 'bordermodal' : ''}></li>
            <li style={{ width: '6vw', height: '6vw', background: linkColor }} onClick={() => this.clickLink(12)} className={linkw === 12 ? 'bordermodal' : ''}></li>
            <li style={{ width: '7vw', height: '7vw', background: linkColor }} onClick={() => this.clickLink(14)} className={linkw === 14 ? 'bordermodal' : ''}></li>
            <li style={{ background: linkColor }} onClick={() => this.clickLink(16)} className={linkw === 16 ? 'bordermodal' : ''}></li>
          </ul>
        </Modal>
        <ul className='painting_body'>
          <li>
            {/* 保存 */}
            <img src={require('./image/baocun.png')} alt="保存" style={{ width: '10vw', marginTop: '3vw' }} onClick={this.baocun} />
          </li>
          <li>
            {/* 清空画布 */}
            <img src={require('./image/delete.png')} alt="清空画布" onClick={this.deleteCan} />
          </li>
          <li>
            {/* 橡皮擦 */}
            <img src={require('./image/endcan.png')} alt="橡皮擦" onClick={this.updateCan} />
          </li>
          <li>
            {/* 大小调节 */}
            <img src={require('./image/daxiao.png')} alt="大小调节" onClick={this.linkweight} />
          </li>
          <li>
            {/* 画笔颜色 */}
            <input type="color" value={linkColor} name='linkColor' id='linkColor' onChange={this.handleInput} style={{ display: 'none' }} />
            <img src={require('./image/linkcolor.png')} alt="画笔颜色" onClick={() => document.getElementById('linkColor').click()} style={{ width: '16vw', marginTop: '-1vw' }} />
          </li>
          <li>
            {/* 背景板颜色 */}
            <input type="color" value={backColor} name='backColor' onChange={this.handleInput} style={{ display: 'none' }} id='backColor' />
            <img src={require('./image/backcolor.png')} alt="背景色" onClick={() => document.getElementById('backColor').click()} />
          </li>
        </ul>
      </div>
    )
  }
}